<template>
  <div class="table-classic-wrapper">
    <el-card>

      <!--购买记录表格-->
      <el-table
          :data="orderList"
          @selection-change="handleSelectionChange"
          stripe
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{textAlign: 'center'}"
          style="width: 100%">

        <el-table-column type="selection" width="50"/>

        <el-table-column
            prop="userName"
            label="购买用户">
        </el-table-column>

        <el-table-column
            prop="text"
            label="美食名称">
        </el-table-column>

        <el-table-column
            prop="price"
            label="美食价格"
            align="center">
        </el-table-column>

        <el-table-column
            prop="purchaseCount"
            label="购买数量"
            align="center">
        </el-table-column>

        <el-table-column
            label="用户购买时间"
            prop="gmtCreate"
            :formatter="formatDate"
            align="center">
        </el-table-column>

        <el-table-column
            prop="tradingState"
            label="配送状态"
            align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.orderState===0">未接单</el-tag>
            <el-tag type="success" v-if="scope.row.orderState===1">已接单</el-tag>
            <el-tag type="danger" v-if="scope.row.orderState===2">待取餐</el-tag>
            <el-tag type="warning" v-if="scope.row.orderState===3">正在路上</el-tag>
            <el-tag type="primary" v-if="scope.row.orderState===4">抵达用户</el-tag>
            <el-tag v-if="scope.row.orderState===5">已接收</el-tag>
          </template>
        </el-table-column>

        <el-table-column
            label="操作"
            align="center">
          <template slot-scope="scope">

            <el-button type="primary" size="mini" @click="handleUpdate(scope.row,'orderStateManagement')"
                       :disabled="scope.row.orderState===5 || scope.row.orderState===4">
              配送管理
            </el-button>
          </template>
        </el-table-column>


      </el-table>

      <!--分页-->
      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>
    </el-card>

    <!--物流管理弹出框-->
    <el-dialog
        title="物流管理"
        :visible.sync="dialogVisibleOrderState"
        before-close="handleClose"
        width="30%">

      <el-form :model="orderStateManagement" ref="refForm" label-width="80px">
        <el-form-item label="配送状态" prop="orderState">
          <el-select v-model="orderStateManagement.orderState" placeholder="请选择">
            <el-option label="确认接单" value='1' :disabled="orderStateManagement.originalOrderState!==0"></el-option>
            <el-option label="等待取餐" value='2' :disabled="orderStateManagement.originalOrderState!==1"></el-option>
            <el-option label="正在路上" value='3' :disabled="orderStateManagement.originalOrderState!==2"></el-option>
            <el-option label="抵达用户" value='4' :disabled="orderStateManagement.originalOrderState!==3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="text-align: right">
          <el-button @click="handleClose" size="medium">取 消</el-button>
          <el-button type="primary" @click="submitForm('orderStateManagement')">提 交</el-button>
        </el-form-item>

      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getUserInformation} from "@/api/user";
import {getAllPurchase, updatePurchaseTradingState} from "@/api/merchant/order/order";
import {getGeneralUserById} from "@/api/general/userGeneral";

export default {

  name: "orderManagement",

  components: {
    Pagination
  },

  data() {
    return {
      /**
       * 多选数据暂存数组
       */
      multipleSelection: [],

      total: 0,//订单总数
      currentPage: 0,//当前页码
      pageSize: 7,//每页显示条数

      originalTotal: 0,//原始订单总数

      /**
       * 订单列表
       */
      orderList: [],

      /**
       * 物流管理对话框弹出框显示
       */
      dialogVisibleOrderState: false,

      /**
       * 物流管理
       */
      orderStateManagement: {
        id: undefined,
        orderState: undefined,
        originalOrderState: undefined,//起始交易状态
      },

      /**
       * 骑手信息
       */
      user: undefined,
    }
  },

  created() {
    this.getGeneralUserById();
  },

  methods: {
    /**
     * 获取订单列表
     * 对应骑手riderId的订单信息或者orderState===0的订单信息
     */
    getOrderList() {

      const formData = new FormData();

      formData.append("riderId", this.user.id);
      formData.append("orderState", 0);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      getAllPurchase(formData).then(res => {
        this.orderList = res.information;
        this.total = res.total;
        this.originalTotal = this.total;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

    },

    /**
     * 获得用户信息
     */
    getGeneralUserById() {
      const user = eval('(' + getUserInformation() + ')');

      const formData = new FormData();

      formData.append("id", user.id);


      getGeneralUserById(formData).then(res => {
        this.user = res.user;
        this.getOrderList();
      }).catch(() => {
        this.$message.error("用户信息获取失败");
      })
    },

    /**
     * 多选操作，与multipleSelection相对应
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      if (this.originalTotal === this.total) {
        this.getOrderList();
      }
    },

    /**
     * 修改购买或收货时间格式
     */
    formatDate(row) {
      var date = new Date(row.gmtCreate);

      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (month < 10) {
        month = '0' + month;
      }

      if (day < 10) {
        day = '0' + day;
      }

      if (hour < 10) {
        hour = '0' + hour;
      }

      if (minute < 10) {
        minute = '0' + minute;
      }

      if (second < 10) {
        second = '0' + second;
      }

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    },

    /**
     * 更新操作
     */
    handleUpdate(row, formName) {

      if (formName === "orderStateManagement") {
        this.orderStateManagement.id = row.id;
        this.orderStateManagement.originalOrderState = row.orderState;
        this.dialogVisibleOrderState = true;
      }
    },

    /**
     * 关闭物流管理页面
     */
    handleClose() {
      this.dialogVisibleOrderState = false;
      this.orderStateManagement.orderState = '';
    },

    /**
     * 提交表单
     */
    submitForm(formName) {
      if (formName === 'orderStateManagement') {
        const formData = new FormData();

        formData.append("id", this.orderStateManagement.id);
        formData.append("riderId",this.user.id);
        formData.append("orderState", this.orderStateManagement.orderState);

        updatePurchaseTradingState(formData).then(res => {
          if (res.message === 1) {
            this.$message.success("配送状态更新成功");
            this.getOrderList();
          }

          this.orderStateManagement.orderState = '';
          this.dialogVisibleOrderState = false;
        }).catch(() => {
          this.$message({
            message: "error",
            type: "error"
          })
        })
      }

    },

  }
}
</script>

<style scoped>
@import "../../../assets/less/merchant/commodity/card.less";
</style>
